<template>
	<view class="container">
		<uni-nav-bar :border="false" backgroundColor="transparent" statusBar color="white" fixed>
			<template v-slot:left>
				<!-- 在这里放置左侧的自定义内容，比如返回按钮或其他内容 -->
				<van-icon name="arrow-left" color="#ffffff" size="34rpx" @click="sweep" />
			</template>
		</uni-nav-bar>
		<image src="../../static/images/colortip.png" class="colortips" />
		<view class="content">
			<!-- 光芒 -->
			<image src="../../static/images/light.png" class="light" />
			<view class="detailMsg">
				<view class="bigTitle">
					解锁新勋章
				</view>

				<!-- 图片 -->
				<image :src="medalUrl" class="msgimg" />
				<view class="msgname">
					{{medalName}}
				</view>
				<view class="msgtext">
					{{content}}
				</view>
				<view class="msgTime">
					{{createTime}}获得
				</view>
				<view class="msgNum">
					{{num}}位用户拥有该勋章
				</view>
			</view>


		</view>
		<view class="knowBtn" @click="sweep">
			我知道了
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				medalName: '',
				medalUrl: '',
				content: '',
				num: '',
				createTime: ''
			}
		},

		onLoad(options) {
			this.medalName = options.medalName,
				this.medalUrl = options.medalUrl,
				this.content = options.content,
				this.num = options.num,
				this.createTime = options.createTime
		},
		methods: {
			// 返回上一页
			sweep() {
				uni.navigateBack({
					delta: 1,
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-nav-bar-text {
		font-size: 36rpx !important;
	}

	.container {
		width: 750rpx;
		min-height: 100vh;
		background: linear-gradient(180deg, #483D37 0%, #0F0F0F 100%);
		// background: #fafafa;
		position: relative;
	}

	.content {
		width: 404rpx;
		height: 566rpx;
		margin: auto;
		text-align: center;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.detailMsg {
		position: absolute;
		top: 86rpx;
		z-index: 9;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.bigTitle {
		font-size: 64rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 90rpx;
		text-shadow: 0px 0px 20px rgba(254, 173, 34, 0.8);
	}

	.msgname {
		font-size: 48rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 66rpx;
		margin-top: 44rpx;
		margin-bottom: 12rpx;

	}

	.msgimg {
		width: 240rpx;
		height: 240rpx;
		margin-top: 60rpx;
		border-radius: 50%;
	}

	.msgtext {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #DDDDDD;
		line-height: 40rpx;
		margin-bottom: 36rpx;
	}

	.msgTime {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
		margin-top: 12rpx;

	}

	.msgNum {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;

	}

	.knowBtn {
		margin: auto;
		width: 240rpx;
		height: 80rpx;
		border-radius: 40rpx;
		border: 2rpx solid #FFFFFF;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		position: absolute;
		bottom: 232rpx;
		left: 256rpx;
	}

	.light {
		width: 574rpx;
		height: 574rpx;
		position: absolute;
		top: 86rpx;
		// left: 96rpx;
		z-index: 2;
		animation-name: rotate; /* 设置动画名称为rotate */
		animation-duration: 5s; /* 设置动画持续时间为2秒 */
		animation-iteration-count: infinite; /* 无限次重复执行动画 */
		animation-timing-function: linear; /* 线性变化速度函数 */
	}

	.colortips {
		width: 750rpx;
		height: 1098rpx;
		position: absolute;
		z-index: 0;
	}
	/* 定义旋转动画 */
	@keyframes rotate {
	  0% { transform: rotate(0deg); } /* 初始状态为不旋转 */
	  100% { transform: rotate(360deg); } /* 结束状态为完全旋转一周（360度）*/
	}
	 
	// /* 应用旋转动画到指定元素上 */
	// .element {
	  
	// }
</style>